<template>
	<view class="wrap">

		<img class="dec" src="../../../static/you-magic/images/topbg1.png" />

		<view class="form">
			<u-form :border-bottom ="false" :model="model" :rules="rules" ref="uForm" :errorType="errorType">
				<u-form-item :border-bottom ="false" label-width="120" :label-position="labelPosition" label="姓名" prop="realname">
					<u-input :border="border" placeholder="请输入您的姓名" v-model="model.realname" type="text"></u-input>
				</u-form-item>
				<u-form-item :border-bottom ="false" :label-position="labelPosition" label="身份证号" prop="idcard">
					<u-input :border="border" placeholder="请输入您的身份证号" v-model="model.idcard" type="text"></u-input>
				</u-form-item>
				<u-form-item :border-bottom ="false" :label-position="labelPosition" label="手机号" prop="tell" label-width="150">
					<u-input :border="border" placeholder="请输入您的收货手机号" v-model="model.tell" type="number"></u-input>
				</u-form-item>
				<u-form-item :border-bottom ="false" :label-position="labelPosition" label="所在地区" prop="region" label-width="150">
					<u-input :border="border" type="select" :select-open="pickerShow" v-model="model.region"
						placeholder="请选择地区" @click="pickerShow = true"></u-input>
				</u-form-item>

				<u-form-item :border-bottom ="false" :label-position="labelPosition" label="具体地址" prop="intro">
					<u-input type="textarea" :border="border" placeholder="请填写具体地址" v-model="model.intro" />
				</u-form-item>





			</u-form>
<u-button class="btn" shape="circle" @click="submit" type="success" :ripple="true" ripple-bg-color="#909399">提 交</u-button>

			<u-picker mode="region" v-model="pickerShow" @confirm="regionConfirm"></u-picker>
		</view>
		<img class="botd" src="../../../static/you-magic/images/botd.png" />
		

	</view>
</template>

<script>
	export default {
		data() {
			let that = this;
			return {
				pickerShow:false,
				model: {
					realname: '',
					idcard: '',
					intro: '',
					region: '',
					tell: '',

				},
id:'',
				rules: {
					realname: [{
							required: true,
							message: '请输入您的姓名',
							trigger: 'blur',
						},

					],
					idcard: [{
						required: true,
						message: '请输入您的身份证号',
						trigger: 'change'
					},
					 {
					 	// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
					 	validator: (rule, value, callback) => {
					 		// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
					 		return this.$u.test.idCard(value);
					 	},
					 	message: '您的身份证号输入有误，请从新输入！',
					 	// 触发器可以同时用blur和change，二者之间用英文逗号隔开
					 	trigger: ['change', 'blur'],
					 },],
					intro: [{
							required: true,
							message: '请填写具体地址'
						}
					],
					
					region: [{
						required: true,
						message: '请选择地区',
						trigger: 'change',
					}],

					tell: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change', 'blur'],
						}
					],

				},
				border: true,

				labelPosition: 'top',

				errorType: ['message'],
			};
		},
		onLoad(e) {
			console.log(e,444);
			this.id = e.id

		},
		computed: {
			borderCurrent() {
				return this.border ? 0 : 1;
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						
	
						this.$u.api
							.submitLevelOneAddress({
								id: this.id,
								address:this.model.region+this.model.intro,
								openid:this.vuex_token1,
								// openid:'oykLd6oAzYI6TUYHM3iDPX1kyRa4',
								tell:this.model.tell,
								idcard:this.model.idcard,
								realname:this.model.realname,
							})
							.then((res) => {
								console.log(res, 88888);
								if(res.code==0){
									uni.navigateTo({
										url:"/pages/sys/msg/record"
									})
								}else{
									this.$u.toast(res.msg);
									
								}
							});
						
						
						
						
					} else {
						console.log('验证失败');
					}
				});
			},
			// 点击actionSheet回调
			actionSheetCallback(index) {
				uni.hideKeyboard();
				this.model.sex = this.actionSheetList[index].text;
			},
			// checkbox选择发生变化
			checkboxGroupChange(e) {
				this.model.likeFruit = e;
			},
			// radio选择发生变化
			radioGroupChange(e) {
				this.model.payType = e;
			},
			// 勾选版权协议
			checkboxChange(e) {
				this.model.agreement = e.value;
			},
			// 选择地区回调
			regionConfirm(e) {
				this.model.region = e.province.label + '-' + e.city.label + '-' + e.area.label;
			},
			// 选择商品类型回调
			selectConfirm(e) {
				this.model.goodsType = '';
				e.map((val, index) => {
					this.model.goodsType += this.model.goodsType == '' ? val.label : '-' + val.label;
				})
			},
			borderChange(index) {
				this.border = !index;
			},
			radioCheckboxChange(index) {
				if (index == 0) {
					this.radioCheckWrap = false;
					this.radioCheckWidth = 'auto';
				} else if (index == 1) {
					this.radioCheckWrap = true;
					this.radioCheckWidth = 'auto';
				} else if (index == 2) {
					this.radioCheckWrap = false;
					this.radioCheckWidth = '50%';
				}
			},
			labelPositionChange(index) {
				this.labelPosition = index == 0 ? 'left' : 'top';
			},
			codeChange(text) {
				this.codeTips = text;
			},
			// 获取验证码
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码',
						mask: true
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						this.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			errorChange(index) {
				if (index == 0) this.errorType = ['message'];
				if (index == 1) this.errorType = ['toast'];
				if (index == 2) this.errorType = ['border-bottom'];
				if (index == 3) this.errorType = ['border'];
			}
		}
	};
</script>
<style>
	page {
		padding-bottom: 50px;
		background-image: linear-gradient(to right, #004d3d, #042821);
	}
</style>
<style scoped lang="scss">
	.botd{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: auto;
		z-index: 9;
	}
	.btn{
		background-image: linear-gradient(to right, #004d3d, #042821);
		box-shadow: 0px 0px 8px rgba(0, 83, 0, 0.5);
		
	}
	/deep/ .u-input--border{
		border: 2rpx solid #000000 !important;
	}
	/deep/ .uicon-arrow-down-fill[data-v-6e20bb40]:before{
		color: #000000;
	}
	.dec {
		width: 100%;
		display: block;
		height: auto;
	}

	.form {
		padding: 20rpx 70rpx 70rpx;
		position: relative;
		z-index: 5;
		margin: -20px auto 50rpx;
		width: 656rpx;
		// height: 1193rpx;
		background: linear-gradient(202deg, #FFF9EE, #F8E4C3);
		border-radius: 20rpx;
		border: 1px solid #DEB97C;
	}
</style>
